<template>
  <div class="fm-style">
    <el-form
      ref="generateForm"
      label-suffix=":"
      :size="tmpData.config.size"
      :model="models"
      :rules="rules"
      :label-position="tmpData.config.labelPosition"
      :label-width="tmpData.config.labelWidth + 'px'"
      :disabled="disabled"
    >
      <template v-for="item in tmpData.list">
        <template v-if="item.type == 'grid'">
          <el-row
            :key="item.key"
            type="flex"
            :gutter="item.options.gutter ? item.options.gutter : 0"
            :justify="item.options.justify"
            :align="item.options.align"
          >
            <el-col
              v-for="(col, colIndex) in item.columns"
              :key="colIndex"
              :span="col.span"
            >
              <template v-for="citem in col.list">
                <el-form-item
                  v-if="citem.type == 'blank'"
                  :label="citem.name"
                  :prop="citem.model"
                  :key="citem.key"
                >
                  <slot :name="citem.model" :model="models"></slot>
                </el-form-item>
                <genetate-form-item
                  v-else
                  :key="citem.key"
                  :remote="remote"
                  :rules="rules"
                  :widget="citem"
                  @input-change="onInputChange"
                >
                </genetate-form-item>
              </template>
            </el-col>
          </el-row>
        </template>

        <template v-else-if="item.type == 'tabs'">
          <generate-form-tabs-item
            :key="item.key"
            :widget="item"
            :remote="remote"
            @input-change="onInputChange"
          />
        </template>

        <template v-else-if="item.type == 'flexContainer'">
          <generate-form-flex-container
            :key="item.key"
            :widget="item"
            :remote="remote"
            @input-change="onInputChange"
          />
        </template>

        <template v-else-if="item.type == 'group'">
          <generate-form-group
            :key="item.key"
            :widget="item"
            :remote="remote"
            @input-change="onInputChange"
          />
        </template>

        <template v-else-if="item.type == 'blank'">
          <el-form-item :label="item.name" :prop="item.model" :key="item.key">
            <slot :name="item.model" :model="models"></slot>
          </el-form-item>
        </template>

        <template v-else>
          <genetate-form-item
            :key="item.key"
            :rules="rules"
            :widget="item"
            :remote="remote"
            @input-change="onInputChange"
          >
          </genetate-form-item>
        </template>
      </template>
    </el-form>
  </div>
</template>

<script>
import GenetateFormItem from './GenerateFormItem'
import GenerateFormTabsItem from './GenerateFormTabsItem.vue'
import GenerateFormFlexContainer from './GenerateFormFlexContainer.vue'
import GenerateFormGroup from './GenerateFormGroup.vue'

export default {
  name: 'fm-generate-form',
  components: {
    GenetateFormItem,
    GenerateFormTabsItem,
    GenerateFormFlexContainer,
    GenerateFormGroup,
  },
  props: ['data', 'remote', 'value', 'insite','disabled'],
  provide() {
    return {
      models: this.models,
    }
  },
  data() {
    return {
      models: {},
      rules: {},
      tmpData: {},
    }
  },
  created() {
    this.tmpData = JSON.parse(JSON.stringify(this.data || {}))
    this.generateModle(this.tmpData.list)
  },
  mounted() {},
  methods: {
    generateModle(genList) {
      for (let i = 0; i < genList.length; i++) {
        if (genList[i].type === 'grid' || genList[i].type === 'flexContainer') {
          genList[i].columns.forEach((item) => {
            this.generateModle(item.list)
          })
        } else if (genList[i].type === 'tabs') {
          genList[i].tabs.forEach((item) => {
            this.generateModle(item.list)
          })
        } else if (genList[i].type === 'group') {
          this.generateModle(genList[i].list)
        } else {
          const modelKey = `${genList[i].type}_${genList[i].key}`
          if (this.value && Object.keys(this.value).indexOf(modelKey) >= 0) {
            this.$set(this.models, modelKey, this.value[modelKey])
          } else {
            if (genList[i].type === 'blank') {
              this.$set(
                this.models,
                modelKey,
                genList[i].options.defaultType === 'String'
                  ? ''
                  : genList[i].options.defaultType === 'Object'
                  ? {}
                  : []
              )
            } else {
              this.$set(this.models, modelKey, genList[i].options.defaultValue)
              // this.models[genList[i].model] = genList[i].options.defaultValue
            }
          }

          if (this.rules[genList[i].model]) {
            this.rules[genList[i].model] = [
              ...this.rules[genList[i].model],
              ...genList[i].rules.map((item) => {
                if (item.pattern) {
                  return { ...item, pattern: new RegExp(item.pattern) }
                } else {
                  return { ...item }
                }
              }),
            ]
          } else {
            this.rules[genList[i].model] = [
              ...genList[i].rules.map((item) => {
                if (item.pattern) {
                  return { ...item, pattern: new RegExp(item.pattern) }
                } else {
                  return { ...item }
                }
              }),
            ]
          }
        }
      }
    },
    getData() {
      return new Promise((resolve, reject) => {
        this.$refs.generateForm.validate((valid) => {
          if (valid) {
            resolve(this.models)
          } else {
            reject(new Error(this.$t('fm.message.validError')).message)
          }
        })
      })
    },
    reset() {
      this.$refs.generateForm.resetFields()
    },
    onInputChange(value, field) {
      this.$emit('on-change', field, value, this.models)
    },
    refresh() {},
  },

  watch: {
    data: {
      deep: true,
      handler(val) {
        console.log('root data change and generate modle')
        this.tmpData = Object.assign({}, val)
        this.generateModle(val.list)
        console.log('root data change and generate modle end')
      },
    },
    value: {
      deep: true,
      handler(val) {
        this.models = { ...this.models, ...val }
      },
    },
    models: {
      deep: true,
      handler(val) {
        console.log('models change')
        console.log(val)
      },
    },
  },
}
</script>

<style lang="scss">
// @import '../styles/cover.scss';
</style>
